<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>博客</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css">
    <link href="/fontAwesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/pagination.css">
</head>

<body>

    <header>
        <div class="backimg"><img src="/images/top.jpg"></div>
    </header>

    <nav>
        <div class="menu">
            <% if(article.category === ''){ %>
                <a href="/" class="focus">首页</a>
            <% }else{ %>
                <a href="/">首页</a>
            <% } %>
            <% for(cate of categories){ %>
                <% if(article.category === cate.id){ %>
                    <a href="/?category=<%= cate.id %>" class="focus"><%= cate.name %></a>
                <% }else{ %>
                    <a href="/?category=<%= cate.id %>"><%= cate.name %></a>
                <% } %>
            <% } %>
        </div>
    </nav>

    <main class="clear">
        <div class="mainLeft">

            <div class="listBox">
                <h1><%= article.title %></h1>
                <p class="colDefault">
                    作者：<span class="colInfo"><%= article.user.username %></span> - 时间：
                    <span class="colInfo"><%= article.addTime %></span> - 阅读：
                    <span class="colInfo"><%= article.viewAmount %></span> - 评论：
                    <span class="colInfo"><%= article.comments.length %></span>
                </p>
                <dfn>
                    <%= article.content %>
                </dfn>
            </div>

            <div class="listBox message">
                <h3 class="textLeft"><strong>评论</strong> <span class="em">一共有 <em id="messageCount">0</em> 条评论</span></h3>
                <% if(user){ %>
                    <p class="textLeft clear">
                        <textarea id="messageContent"></textarea>
                        <input type="hidden" id="articleId" value="<%= article.id %>">
                        <button id="messageBtn" class="submit">提交</button>
                    </p>
                <% }else{ %>
                    <p class="bgDanger" style="line-height: 30px;">你还没有登录，请先登录！</p>
                <% } %>

                <div class="messageList">
                </div>

                <!-- not use pagination -->
                <!-- <div class="pager">
                    <ul class="clear">
                        <li class="previous">
                            <a href="">上一页</a>
                        </li>
                        <li></li>
                        <li class="next">
                            <a href="">下一页</a>
                        </li>
                    </ul>
                </div> -->

                <div id="pagination"></div>

                <!--<div class="messageList">-->
                <!--<div class="messageBox"><p>还没有留言</p></div>-->
                <!--</div>-->

                <!--<div class="messageList" style="display: block;">-->
                <!--<div class="messageBox">-->
                <!--<p class="name clear"><span class="fl">admin</span><span class="fr">2016年07月29日 17:24:01</span></p><p>哈哈</p>-->
                <!--</div>-->
                <!--</div>-->

            </div>

        </div>
        <div class="mainRight">
            <!-- show user div or login/register based on whether backend passed user data -->
            <% if(user){ %>
            <div class="rightBox" id="user">
                <div class="title"><span>用户信息</span></div>
                <p><span class="colDark username"><%= user.username %></span></p>
                <% if(user.isAdmin){ %>
                <p><span class="colDanger info">welcome Admin, </span><a href="/admin">enter admin</a></p>
                <% }else{ %>
                <p><span class="colDanger info">welcome to my blog!</span></p>
                <% } %>
                <p><span class="colDark" id="logout"><a href="javascript:">log out</a></span></p>
            </div>
            <% }else{ %>
            <div class="rightBox" id="loginBox">
                <div class="title"><span>登录</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text" /><em></em></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password" /><em></em></div>
                <div class="line"><span class="colDark"></span><button>登 录</button></div>
                <p class="textRight">还没注册？<a href="javascript:;" class="colMint">马上注册</a></p>
                <p class="colWarning textCenter"></p>
            </div>
            <div class="rightBox" id="registerBox" style="display: none;">
                <div class="title"><span>注册</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text" /></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password" /></div>
                <div class="line"><span class="colDark">确认：</span><input name="repassword" type="password" /></div>
                <div class="line"><span class="colDark"></span><button>注 册</button></div>
                <p class="textRight">已有账号？<a href="javascript:;" class="colMint">马上登录</a></p>
                <p class="colWarning textCenter"></p>
            </div>
            <% } %>

            <div class="rightBox">
                <div class="title"><span>社区</span></div>
                <p><a href="http://google.com" target="_blank" class="colDanger">google</a></p>
                <p><a href="http://baidu.com" target="_blank" class="colDanger">baidu</a></p>
            </div>
        </div>
    </main>

    <div class="copyright textCenter">Copyright © Guanghui Wang</div>
</body>
<script src="/lib/jquery-1.12.4.min.js"></script>
<script src="/js/index.js"></script>
<script src="/js/time.js"></script>
<script src="/js/pagination.js"></script>
<script src="/js/comment.js"></script>

</html>
